@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
  --tr: all 0.5s ease 0s;
  --ch1: #05478a;
  --ch2: #0070e0;
  --cs1: #005e38;
  --cs2: #03a65a;
  --cw1: #c24914;
  --cw2: #fc8621;
  --ce1: #851d41;
  --ce2: #db3056;
}

@property --bg-help {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -10%;
}

@property --bg-success {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 145%;
}

@property --bg-warning {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -55%;
}

@property --bg-error {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 112%;
}

@property --bsc {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  background: radial-gradient(circle at 100% 80%, #b3cdd1, #a7b5c9);
  font-family: "Varela Round", sans-serif;
}

.toast-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
  position: absolute;
  padding: 0 1rem;
  height: 100%;
}

.toast-item {
  /*overflow: hidden;*/
  max-height: 25rem;
  transition: var(--tr);
  position: relative;
  animation: show-toast 4s ease 3s 1;
}

@keyframes show-toast { 
  0%, 50%, 100% { max-height: 0; opacity: 0; }
  10%, 25% { max-height: 15rem; opacity: 1; }
}

.toast {
  background: #fff;
  color: #f5f5f5;
  padding: 1rem 2rem 1rem 3rem;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  font-weight: 300;
  margin: 1rem 0;
  text-align: left;
  max-width: 16rem;
  transition: var(--tr);
  opacity: 1;
  border: 0.15rem solid #fff2;
  box-shadow: 0 0 1.5rem 0 #1a1f4360;
}

.toast:before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: calc(100% - 1.5rem);
  top: 0.75rem;
  left: 0.5rem;
  z-index: 0;
  border-radius: 1rem;
  background: var(--clr);
}

.toast h3 {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.35rem;
  font-weight: 600;
  position: relative;
  color: var(--clr);
}

.toast p {
  position: relative;
  font-size: 0.95rem;
  z-index: 1;
  margin: 0.25rem 0 0;
  color: #595959;
  line-height: 1.3rem;
}

.close {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  text-align: center;
  right: 1rem;
  cursor: pointer;
  border-radius: 100%;
}

.close:after {
  position: absolute;
  font-family: 'Varela Round', san-serif;
  width: 100%;
  height: 100%;
  left: 0;
  font-size: 1.8rem;
  content: "+";
  transform: rotate(-45deg);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #595959;
  text-indent: 1px;
}

.close:hover:after {
  background: var(--clr);
  color: #fff;
}



.toast-item.success {
  animation-delay: 2s;
}

.toast-item.warning {
  animation-delay: 1s;
}

.toast-item.error {
  animation-delay: 0s;
}


.toast.help {
  --bg: var(--ch1);
  --clr: var(--ch2);
  --brd: var(--ch3);
}
.icon-help:after {
  content: "?";
}

.toast.success {
  --bg: var(--cs1);
  --clr: var(--cs2);
  --brd: var(--cs3);
}

.icon-success:after {
  content: "L";
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 0.35rem;
  transform: rotateY(180deg) rotate(-38deg);
  text-indent: 0.1rem;
}

.toast.warning {
  --bg: var(--cw1);
  --clr: var(--cw2);
  --brd: var(--cw3);
}

.icon-warning:after {
  content: "!";
  font-weight: bold;
}

.toast.error {
  --bg: var(--ce1);
  --clr: var(--ce2);
  --brd: var(--ce3);
}

.icon-error:after {
  content: "+";
  font-size: 2.85rem;
  line-height: 1.2rem;
  transform: rotate(45deg);
}






.toast a {
  color: var(--clr);
}

.toast a:hover {
  color: var(--bg);
}





/*** ICONS ***/

.toast-icons {
  background: #fff;
  padding: 1rem 1rem 1.25rem 1rem;
  display: flex;
  justify-content: space-around;
  border-radius: 1rem;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  border: 0.15rem solid #fff1;
  box-shadow: 0 0 1.5rem 0 #1a1f4340;
}

.toast-icons:before {
  position: absolute;
  width: calc(100% + 0.3rem);
  height: calc(100% + 0.25rem);
  --bg-help: 45%;
  --bg-success: 45%;
  --bg-warning: 45%;
  --bg-error: 45%;
  --bsc: #fff0;
  background: 
    radial-gradient(circle at 14% var(--bg-help), var(--ch1), #fff0 1.5rem), radial-gradient(circle at 38% var(--bg-success), var(--cs1), #fff0 1.5rem), radial-gradient(circle at 62% var(--bg-warning), var(--cw1), #fff0 1.5rem), radial-gradient(circle at 86% var(--bg-error), var(--ce1), #fff0 1.5rem);
  content: "";
  bottom: -0.15rem;
  border-radius: 1rem;
  z-index: 0;
  transition: --bg-help 0.5s ease 0s, --bg-success 0.5s ease 0s, --bg-warning 0.5s ease 0s, --bg-error 0.5s ease 0s, --bsc 0.5s ease 0s;
  box-shadow: 0 0 1.5rem 0 #1a1f4320;
}

.toast-icons:has(label[for=t-help]:hover):before {
  --bg-help: 53%;
  --bsc: var(--ch2);
}
.toast-icons:has(label[for=t-success]:hover):before {
  --bg-success: 53%;
  --bsc: var(--cs2);
}
.toast-icons:has(label[for=t-warning]:hover):before {
  --bg-warning: 53%;
  --bsc: var(--cw2);
}
.toast-icons:has(label[for=t-error]:hover):before {
  --bg-error: 53%;
  --bsc: var(--ce2);
}

.toast-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  position: relative;
  background: radial-gradient(circle at 50% 50%, var(--clr) 1.25rem, var(--brd) calc(1.25rem + 1px) 100%);
}



.toast-icon:after {
  font-size: 1.75rem;
}
.icon-success:after {
  font-size: 1.5rem;
  padding-bottom: 0.25rem;
}
.icon-error:after {
  font-size: 2.85rem;
  line-height: 2rem;
  font-weight: 500;
  padding-top: 0.25rem;
  max-height: 2rem;
}


.icon-help,
.toast-item.help {
  --clr: #0070e0;
  --brd: #0070e040;
}

.icon-success,
.toast-item.success {
  --clr: #03a65a;
  --brd: #03a65a40;
}

.icon-warning,
.toast-item.warning {
  --clr: #fc8621;
  --brd: #fc862140;
}

.icon-error,
.toast-item.error {
  --clr: #db3056;
  --brd: #db305640;
}


#t-help:checked ~ .toast-panel .toast-item.help,
#t-success:checked ~ .toast-panel .toast-item.success,
#t-warning:checked ~ .toast-panel .toast-item.warning,
#t-error:checked ~ .toast-panel .toast-item.error {
  max-height: 0;
  opacity: 0;
}

input[type=checkbox] {
  display: none;
}